<template>
  <div v-show="$store.state.design.whatTool===4" ref="scrollbox" class="toolbox" style="overflow-y: scroll;">
    <div
      v-for="(item,index) in myCategories"
      :key="index"
      class="categoriesbox"
      :style="{maxHeight:viewCa.indexOf(index) !== -1? '1500px':'54px'}"
    >
      <div class="catitle" @click="clicktitle(index)">
        {{ item.name }}
        <img v-show="viewCa.indexOf(index) === -1" src="/static/image/op.png" alt="img" class="catitleimg">
        <img v-show="viewCa.indexOf(index) !== -1" src="/static/image/op2.png" alt="img" class="catitleimg">
      </div>
      <div class="clearfix">
        <div
          v-for="(ite,ind) in item.children"
          :key="ind"
          class="onedesign"
          style="cursor: pointer;"
          :title="ite.name"
          @click="chioseProduct(ite.designId,ite.product_id)"
        >
          <img :src="ite.image" alt="img" width="200" height="200">
          <p class="ovtext">{{ ite.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myCategories: [{
        'name': 'Test Data',
        'image': 'catalog/Categories image/football.png',
        'children': [{
          'designId': '0',
          'image': require('@/assets/imgs/POD.png'),
          'name': 'Test 0',
          'href': 'http://erp.shopmell.com:10020/#/onlineDesign?designId=0'
        }, {
          'designId': '1',
          'image': require('@/assets/imgs/POD1.png'),
          'name': 'Test 1',
          'href': 'http://erp.shopmell.com:10020/#/onlineDesign?designId=1'
        }, {
          'designId': '2',
          'image': require('@/assets/imgs/POD2.png'),
          'name': 'Test 2',
          'href': 'http://erp.shopmell.com:10020/#/onlineDesign?designId=2'
        }]
      }],
      viewCa: []
    };
  },
  computed: {},
  created() {
    // $.ajax({
    //   context:this,
    //   url:resourceUrl.getCategories,
    //   success:function(res){
    //     var categories = res.categories, i = 0,len = categories.length, j = 0,len2=0,arr=null,obj = null,asdf = 0,idArr = null;
    //     for(i=0;i<len;i++){
    //       arr = [];
    //       len2 = categories[i].children.length;
    //       for(j=0;j<len2;j++){
    //         if(categories[i].children[j].design_id.indexOf('_') === -1)continue;
    //         // {
    //         //   console.log(categories[i].name,'---------------',categories[i].children[j].name)
    //         //   ;
    //         // }
    //         idArr = categories[i].children[j].design_id.split('_');
    //         obj = {};
    //         obj.image = encodeURI(window.globalData.base4 + '/image/' + categories[i].children[j].image);
    //         obj.name = categories[i].children[j].name;
    //         obj.designid = idArr[0];
    //         obj.product_id = idArr[1];
    //         arr.push(obj);
    //       }
    //       this.$set(this.myCategories,categories[i].name,arr);
    //       localStorage.setItem('myCategories',JSON.stringify(this.myCategories));
    //     }
    //   }
    // });
  },
  methods: {
    chioseProduct(designId, product_id) {
      console.log(designId);
      console.log(product_id);
      globalData.toDesign = designId;
      globalData.toProduct = product_id;
      this.$store.commit('design/setShadeState', 6);
    },
    clicktitle(i) {
      // this.$refs.scrollbox.scrollTop = '0px';
      var index = this.viewCa.indexOf(i);
      if (index === -1) {
        this.viewCa.push(i);
      } else {
        this.viewCa.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped>
.toolbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: auto;
}
.ovtext{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.categoriesbox {
  overflow: hidden;
  transition: max-height 0.5s;
  cursor: pointer;
}
.catitle {
  position: relative;
  height: 54px;
  font-size: 18px;
  font-weight: 700;
  line-height: 54px;
  text-indent: 20px;
}
.catitleimg {
  height: 23px;
  width: 23px;
  position: absolute;
  right: 40px;
  top: 10px;
}
.onedesign {
  float: left;
  position: relative;
  width: 200px;
  height: 220px;
  margin: 6px;
  overflow: hidden;
}
.onedesign p {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  line-height: 20px;
}
</style>

// WEBPACK FOOTER //
// src/components/categories.vue
